// Copyright 2022-2024 use-ink/contracts-ui authors & contributors
// SPDX-License-Identifier: GPL-3.0-only

import { createContext, useContext, useEffect } from 'react';
import { LOCAL_STORAGE_KEY } from '../../constants';
import { useLocalStorage } from 'ui/hooks/useLocalStorage';

type Theme = 'light' | 'dark';
type Props = {
  theme: Theme;
  setTheme?: (_: Theme) => void;
};
const INIT_STATE: Props = {
  theme: 'theme' in localStorage ? localStorage.theme === 'dark' ? 'dark' : 'light' : window.matchMedia('(prefers-color-scheme: dark)').matches  ? 'dark'  : 'light',
};

export const ThemeContext = createContext(INIT_STATE);

export const ThemeContextProvider = ({ children }: React.PropsWithChildren<Partial<Props>>) => {
  const [theme, setTheme] = useLocalStorage<Theme>(LOCAL_STORAGE_KEY.THEME, INIT_STATE.theme);
  useEffect(() => {
    console.log('theme', theme);
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
      document.documentElement.classList.remove('light');
      document.documentElement.classList.remove('theme-system');
    } else if(theme ==='light'){
      document.documentElement.classList.add('light');
      document.documentElement.classList.remove('dark');
      document.documentElement.classList.remove('theme-system');
    }else if(theme === 'system'){
      console.log('theme', theme);
      document.documentElement.classList.add('theme-system')
      document.documentElement.classList.remove('dark');
      document.documentElement.classList.remove('light');
    }
  }, [theme]);
  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
};
export const useTheme = () => useContext(ThemeContext);
